import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { zip } from 'rxjs';
import { finalize } from 'rxjs/operators';

@Component({
  selector: 'app-business-shipment-view',
  templateUrl: './view.component.html',
  styles: [
    `
      nz-select {
        width: 20%;
      }
    `
  ]
})
export class BusinessShipmentViewComponent implements OnInit {
  i: any;
  detailOverview: any;
  tBoxView: any;
  boxView: any;
  rDetailView: any;
  boxSelected: string = '';
  skus: any;
  summary: any;
  tag = {
    extra: '多件',
    shortage: '少件',
    broken: '坏件'
  };

  constructor(private modal: NzModalRef, private msgSrv: NzMessageService, private http: _HttpClient, private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.loadDataFromServer(this.i.shopId, this.i.shipmentId);
  }

  loadDataFromServer(shopId: number, shipmentId: string) {
    zip(
      this.http.get(`api/shipment/detail_view`, { shopId: shopId, shipmentId: shipmentId }),
      this.http.get(`api/shipment/track_box_view`, { shopId: shopId, shipmentId: shipmentId })
    )
      .pipe(
        finalize(() => {
          this.cdr.detectChanges();
        })
      )
      .subscribe(([dv, tbv]: [NzSafeAny, NzSafeAny]) => {
        this.detailOverview = dv.data;
        this.tBoxView = tbv.data;
      });
  }

  loadWareData(shopId: number, shipmentId: string, boxNum = '', tabFilter = 'all') {
    zip(
      this.http.get(`api/shipment/received_detail_view`, {
        shopId: shopId,
        shipmentId: shipmentId,
        boxNumber: boxNum,
        tabFilter: tabFilter
      }),
      this.http.get(`api/shipment/box_view`, {
        shopId: shopId,
        shipmentId: shipmentId,
        boxNumber: boxNum,
        tabFilter: tabFilter
      })
    )
      .pipe(
        finalize(() => {
          this.cdr.detectChanges();
        })
      )
      .subscribe(([rdv, bv]: [NzSafeAny, NzSafeAny]) => {
        this.rDetailView = rdv.data;
        if (this.rDetailView) {
          this.skus = this.rDetailView['skus'];
          this.summary = this.rDetailView['summary'];
        } else {
          this.skus = [];
        }
        this.boxView = bv.data;
      });
  }

  close(): void {
    this.modal.destroy();
  }
}
